<template>
  <div class="classH5-login">
    <!-- <mt-picker :slots="slots" @change="onValuesChange"></mt-picker> -->
    <div class="login-box">
        <div class="login-title flex-row">
            <span class="login-title-span1">{{loginWay?'帐号登录':'验证登录'}}</span>
            <span class="login-title-span2">您也可以 <span class="login-title-pwd" @click="changeLoginWay">{{loginWay?'验证登录':'帐号登录'}}</span></span>
        </div>
        <div class="login-userNum flex-row">
            <input type="number" placeholder="请输入手机号" v-model="userPhone" @blur='testPhone'>
        </div>
        <div class="login-userCode flex-row" v-if='loginWay'>
            <input type="password" placeholder="请输入密码" v-model="userPwd" @blur='testPwd'>
        </div>
        <div class="login-userCode flex-row" v-if='!loginWay'>
            <input type="password" placeholder="请输入验证码" v-model="userCode" @blur='testCode'>
            <span :class="canSend?'login-getCode':'login-getCode getCode-desable'" @click="getCode">{{sendCodeText}}</span>
        </div>
        
        <div :class="loginDesable?'login-btn login-btn-desable':'login-btn'" @click="userLogin">登录</div>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant';
import {loginByPhone, login} from 'api/getData'
import { mapActions } from 'vuex'
export default {
  data() {
    return {
      loginWay: true,
      canSend: false,  
      userPhone: '',
      userCode: '',
      userPwd: '',
      timeNum: 0,
      timing: 1,
      loginDesable: true,
      sendCodeText: '获取验证码'
    }
  },
 
  created() {
 
  },
  mounted () {
    
    if(window.__wxjs_environment === 'miniprogram'){
      wx.miniProgram.postMessage({data: 'test send message'})
    }
  },
  methods:{
    ...mapActions([
      "setUser"
    ]),
    watchWeChart(){
      var wechatInfo = window.navigator.userAgent.match(/MicroMessenger\/([\d\.]+)/i);
      if (!wechatInfo) return;
      var wechatVersion = wechatInfo[1];
      var version = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);

      if (+wechatVersion.replace(/\./g, '') >= 674 && +version[1] >= 12) {
        window.scrollTo(0, Math.max(document.body.clientHeight, document.documentElement.clientHeight));
      }
    },
    changeLoginWay(){
      this.loginWay = !this.loginWay
      if(this.loginWay) this.testPwd()
      else this.testCode()
    },
    userLogin(){
      if(!this.loginDesable){
        if (this.loginWay) this.codeLogin()
        else this.phoneLogin()
      }
    },
    phoneLogin(){
      // console.log('phone login')
      loginByPhone(this.userPhone,this.userCode).then(res=>{
          // console.log(res)
          if(res.code){
            Toast(res.message)
          }else if(res.user){
            Toast('登录成功')
            this.setUser(res.user)
            this.$router.replace({
              path:'/H5classList'
            })
          }
      })
    },
    codeLogin(){
      // console.log('code login')
      login(this.userPhone,this.userPwd).then(res=>{
        // console.log(res)
        if(res.code){
            Toast(res.message)
          }else if(res.user){
            Toast('登录成功')
            this.setUser(res.user)
            this.$router.replace({
              path:'/H5classList'
            })
        }
      })
      
    },
    getCode(){
      if(this.validPhone(this.userPhone) && this.canSend){
        this.canSend = false
        this.timeNum = 60
        loginByPhone(this.userPhone,'').then(res=>{
          console.log(res)
          this.timing = setInterval(()=>{
            if(this.timeNum <= 0){
                this.canSend = true
                this.sendCodeText='重新获取'
                clearInterval(this.timing)
            }else {
              this.timeNum--
              this.sendCodeText = '重新获取'+ this.timeNum + 's'
            }
          },1000)
        })
      }else{
        Toast('请核对手机号码')
      }
    },
    validPhone(num){
      let reg = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/;
        if(reg.test(num)){
          return true
        }else{
          return false
        }
    },
    testCode(){
      
      if(this.userCode && this.validPhone(this.userPhone)){
        this.loginDesable = false
      }else{
        this.loginDesable = true
      }
      this.watchWeChart()
      // console.log('loginDesable:',this.loginDesable)
    },
    testPwd(){
      
      if(this.userPwd && this.validPhone(this.userPhone)){
        this.loginDesable = false
      }else{
        this.loginDesable = true
      }
      this.watchWeChart()
      // console.log('loginDesable:',this.loginDesable)
    },
    testPhone(e){
        if(this.validPhone(e.target._value)){
          this.canSend = true
          if(this.userCode || this.userPwd){
            this.loginDesable = false
          }else{
            this.loginDesable = true
          }
        }else{
          this.canSend = false
          this.loginDesable = true
        }
        this.watchWeChart()
    }
  }
}

</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
@import '~style/base.styl';
.classH5-login{
    height: 100vh;
    overflow: hidden;
    padding: 0 3rem;
    background-image url('../../../static/h5img/denglubj.png')
}
.login-box{
    box-sizing: border-box;
    height: 78.6rem;
    margin-top: 15rem;
    padding: 15rem 5rem 0 5rem;
    background:rgba(255,255,255,1);
    border-radius:2.6rem;
}
.login-title{
    padding: 1rem 0;
    justify-content: space-between;
    align-items: flex-end;
    .login-title-span1{
        font-size:5.2rem;
        font-family:SourceHanSansCN-Bold;
        font-weight:bold;
        color:rgba(30,30,30,1);
    }
    .login-title-span2{
        font-family:SourceHanSansCN-Regular;
        font-size:2.6rem;
        font-family:SourceHanSansCN-Regular;
        font-weight:400;
        color:rgba(30,30,30,1);
    }
    .login-title-pwd{
        cursor: pointer;
        color: #FF240D;
        text-decoration:underline;
    }
}
.login-userNum,.login-userCode{
    margin-top: 7rem;
    input{
        flex: 1;
        border: 0;
        outline:none;
        height:9.8rem;
        background:rgba(247,247,247,1);
        border-radius:0.4rem;
        font-size:3rem;
        font-family:SourceHanSansCN-Regular;
        font-weight:400;
        color:rgba(30,30,30,1)
        padding-left: 2rem;
    }
}
.login-userCode{
    margin-top: 2rem;
    position: relative;
    .login-getCode{
        font-size:2.6rem;
        font-family:SourceHanSansCN-Regular;
        font-weight:400;
        color:rgba(255,36,13,1);
        position: absolute;
        top:4rem;
        right: 2rem;
    }
    .getCode-desable{
      color:rgba(164,164,164,1);
    }
}
.login-btn{
    margin-top: 7rem;
    height:9.8rem;
    line-height: 9.8rem;
    background:rgba(255,36,13,1);
    border-radius:0.4rem;
    text-align: center;
    color:rgba(255,255,255,1);
    font-family:SourceHanSansCN-Regular;
    font-weight:400;
    font-size:3.6rem;
}
.login-btn-desable{
    opacity:0.5;
}
</style>
